<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>label上面文本太长，需要换行：加入\n；</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该案例演示当label太长时候，如何换行显示。
       * by 镜曦。
       *
       */
      const data = {
        nodes: [
          {
            x: 100,
            y: 100,
            shape: 'rect',
            label: '这个文案\n有点长',
            id: 'node1',
            labelCfg: {
              position: 'bottom',
            },
            anchorPoints: [
              [0, 0.5, { type: 'circle', style: { stroke: 'red', fill: 'red' } }],
              [1, 0.5, { type: 'circle', style: { stroke: 'blue', fill: 'red' } }],
            ],
          },
          {
            x: 300,
            y: 100,
            shape: 'rect',
            label: '这个文案\n也有点长',
            id: 'node2',
            labelCfg: {
              position: 'bottom',
            },
            anchorPoints: [
              [0, 0.5, { type: 'circle', style: { stroke: 'red', fill: 'red' } }],
              [1, 0.5, { type: 'circle', style: { stroke: 'blue', fill: 'red' } }],
            ],
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            label: 'label上面这个文本太长了\n我需要换行',
            labelCfg: {
              refY: 20,
            },
            style: {
              endArrow: true,
            },
          },
        ],
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        defaultNode: {
          style: {
            fill: '#87e8de',
          },
          color: '#87e8de',
        },
        defaultEdge: {
          color: '#bae7ff',
        },
        modes: {
          default: [
            'drag-node',
            {
              type: 'drag-node',
            },
          ],
        },
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
